<template>
  <div class="login-page">
    <div class="container-fluid">
      <div class="row justify-content-center align-items-center min-vh-100">
        <div class="col-11 col-sm-8 col-md-6 col-lg-4">
          <div class="card shadow">
            <div class="card-header text-white text-center py-4">
              <h2 class="mb-0"><i class="fas fa-tree me-2"></i>家谱管理系统</h2>
            </div>
            <div class="card-body p-4">
              <form @submit.prevent="handleLogin">
                <div class="form-group mb-4">
                  <label for="userId" class="form-label fs-5">用户ID:</label>
                  <input
                      type="number"
                      id="userId"
                      v-model="userId"
                      class="form-control form-control-lg"
                      placeholder="请输入用户ID"
                      required
                  >
                </div>
                <div class="form-group mb-4">
                  <label for="password" class="form-label fs-5">密码:</label>
                  <input
                      type="password"
                      id="password"
                      v-model="password"
                      class="form-control form-control-lg"
                      placeholder="请输入密码"
                      required
                  >
                  <small v-if="!isValidPassword && password" class="text-danger">
                    密码长度至少为8个字符
                  </small>
                </div>
                <button
                    type="submit"
                    class="btn btn-primary w-100 mb-4 py-3 fs-5"
                    :disabled="!userId || !isValidPassword"
                >
                  <i class="fas fa-sign-in-alt me-2"></i>登录
                </button>
              </form>
              <div class="text-center fs-5">
                <router-link to="/register" class="text-decoration-none">
                  <i class="fas fa-user-plus me-1"></i>还没有账号？立即注册
                </router-link>
              </div>

              <div v-if="errorMessage" class="alert alert-danger mt-4 text-center">
                <i class="fas fa-exclamation-triangle me-2"></i>{{ errorMessage }}
              </div>

              <div v-if="successMessage" class="alert alert-success mt-4 text-center">
                <i class="fas fa-check-circle me-2"></i>{{ successMessage }}
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import axios from 'axios';

export default {
  name: 'LoginView',
  data() {
    return {
      userId: '',
      password: '',
      errorMessage: '',
      successMessage: ''
    };
  },
  mounted() {
    // 如果已经登录，直接跳转到主菜单
    const isLoggedIn = localStorage.getItem('isLoggedIn') === 'true';
    if (isLoggedIn) {
      this.$router.push('/');
    }
  },
  computed: {
    isValidPassword() {
      return this.password.length >= 8;
    }
  },
  methods: {
    async handleLogin() {
      // 清除之前的消息
      this.errorMessage = '';
      this.successMessage = '';

      if (!this.userId || !this.isValidPassword) {
        this.errorMessage = '请检查输入信息是否正确';
        return;
      }

      try {
        const response = await axios.post('http://localhost:8080/users/login', {
          userId: parseInt(this.userId),
          password: this.password
        });

        if (response.data.code === '200') {
          this.successMessage = '登录成功！正在跳转到主页面...';
          localStorage.setItem('isLoggedIn', 'true');
          localStorage.setItem('userId', this.userId);
          setTimeout(() => {
            this.$router.push('/home');
          }, 1000);
        } else {
          this.errorMessage = response.data.msg || '登录失败，请检查用户ID和密码';
        }
      } catch (error) {
        console.error('登录错误:', error);
        if (error.response && error.response.data) {
          this.errorMessage = error.response.data.msg || '登录失败，请稍后重试';
        } else {
          this.errorMessage = '网络连接失败，请检查网络连接';
        }
      }
    }
  }
};
</script>

<style scoped>
.login-page {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #0061ff 0%, #ff69b4 100%);
}

.card {
  border-radius: 20px;
  border: none;
  backdrop-filter: blur(10px);
  background-color: rgba(255, 255, 255, 0.9);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
}

.card-header {
  border-radius: 20px 20px 0 0 !important;
  background: linear-gradient(45deg, #0056b3, #ff69b4);
  padding: 1.5rem !important;
}

.btn-primary {
  background: linear-gradient(45deg, #0056b3, #007bff);
  border: none;
  transition: all 0.3s ease;
  font-weight: 500;
}

.btn-primary:hover:not(:disabled) {
  background: linear-gradient(45deg, #004494, #0056b3);
  transform: translateY(-2px);
}

.btn-primary:disabled {
  background: #6c757d;
  transform: none;
}

.form-control {
  border-radius: 10px;
  border: 1px solid #ced4da;
  transition: all 0.3s ease;
  padding: 0.8rem 1rem;
}

.form-control:focus {
  border-color: #007bff;
  box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25);
}

.alert {
  border-radius: 12px;
  border: none;
  padding: 1rem;
}

a {
  color: #0056b3;
  transition: color 0.3s ease;
  font-weight: 500;
}

a:hover {
  color: #003d82;
}

.container-fluid {
  padding: 0;
}

@media (max-width: 768px) {
  .card {
    margin: 1rem;
  }
}
</style> 